<template>
  <div>
    <a-modal
      :title="type ? '新增充值方式' : '编辑充值方式'"
      :visible="visible"
      :confirmLoading="confirmLoading"
      destroyOnClose
      @cancel="cancel"
      @ok="handleOk"
    >
      <a-form
        ref="ruleForm"
        :form="form"
        :label-col="{span:4}"
        :wrapper-col="{span:19}"
        layout="horizontal"
      >
        <a-form-item label="充值方式">
          <a-input
            id="channel"
            v-decorator="['channel',
              {
                initialValue:record.channel,
                rules: [{ required: true,message:'充值方式不能为空' }]
              }
            ]"
            placeholder="请输入充值方式..."
          />
        </a-form-item>
        <a-form-item label="最小金额">
          <a-input
            id="title"
            v-decorator="['min',
              {
                initialValue:record.min,
                rules: [{ required: true,message:'最小金额不能为空' }]
              }
            ]"
            placeholder="请输入最小金额..."
            @change="changeValue"
          />
        </a-form-item>
        <a-form-item label="最大金额">
          <a-input
            id="title"
            v-decorator="['max',
              {
                initialValue:record.max,
                rules: [{ required: true,message:'最大金额不能为空' }]
              }
            ]"
            placeholder="请输入最大金额..."
            @change="changeValue"
          />
        </a-form-item>
        <a-alert message="添加充值方式时，请与第三方充值渠道商确认该充值方式是否可用，以及名称是否与其一致"
                 type="error" />
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { saveRequest, updateRequest } from '@/api/recharge-manage'
import store from '@/store'
import { message } from 'ant-design-vue'
import { limitNumberLength } from '@/utils/util'

export default {
  name: 'rechargeEditAdd',
  props: ['visible', 'record', 'type'],
  data() {
    return {
      form: this.$form.createForm(this),
      confirmLoading: false,
      modalVisible: false
    }
  },
  watch: {
    visible(val) {
      this.modalVisible = val
    }
  },
  methods: {
    changeValue(e) {
      return e.target.value = limitNumberLength(e.target.value)
    },
    handleOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true
          const params = {
            channel: values.channel,
            min: values.min,
            max: values.max,
            userId: store.getters.userInfo?.userId
          }
          // 如果是修改需要新增这两个参数
          if (!this.type) {
            params.id = this.record.id
            params.uuid = this.record.uuid
          }
          let api = this.type ? saveRequest : updateRequest
          api(params).then(res => {
            this.confirmLoading = false
            if (res.code === 200) {
              message.success(res.msg || '操作成功！')
              this.$emit('onOk', this.type ? 'add' : 'edit')
            }
          })
        }
      })
    },
    cancel() {
      this.resetFormValue()
      this.$emit('cancel')
    },
    // 重置表单一般在第一次访问表单时进行重置
    resetFormValue() {
      this.$nextTick(() => {
        this.form.resetFields()
      })
    }
  }
}
</script>

<style scoped lang="less">

</style>